<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录/注册切换示例</title>
		<style>
			#loginForm,
			#registerForm {
				display: none;
			}

			#loginForm.active,
			#registerForm.active {
				display: block;
			}

			.button-group {
				margin-bottom: 20px;
			}

			.button-group button {
				margin-right: 10px;
				padding: 10px 20px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>

		<div class="button-group">
			<button id="loginButton">登录</button>
			<button id="registerButton">注册</button>
		</div>

		<div id="loginForm" class="active">
			<h2>登录</h2>
			<form>
				<label for="loginUsername">用户名:</label>
				<input type="text" id="loginUsername" name="username"><br><br>
				<label for="loginPassword">密码:</label>
				<input type="password" id="loginPassword" name="password"><br><br>
				<button type="submit">登录</button>
			</form>
		</div>

		<div id="registerForm">
			<h2>注册</h2>
			<form>
				<label for="registerUsername">用户名:</label>
				<input type="text" id="registerUsername" name="username"><br><br>
				<label for="registerPassword">密码:</label>
				<input type="password" id="registerPassword" name="password"><br><br>
				<label for="registerEmail">邮箱:</label>
				<input type="email" id="registerEmail" name="email"><br><br>
				<button type="submit">注册</button>
			</form>
		</div>

		<script>
			const loginButton = document.getElementById('loginButton');
			const registerButton = document.getElementById('registerButton');
			const loginForm = document.getElementById('loginForm');
			const registerForm = document.getElementById('registerForm');

			loginButton.addEventListener('click', function() {
				loginForm.classList.add('active');
				registerForm.classList.remove('active');
			});

			registerButton.addEventListener('click', function() {
				registerForm.classList.add('active');
				loginForm.classList.remove('active');
			});
		</script>

	</body>
</html>